<template>
  <view class="supply-group-list">
    <view v-for="(it, ix) in list" :key="ix" class="item" @click.stop="_handleClick(it)">
      <view class="user-wrap">
        <view class="user-content">
          <image :src="it.groupAvatar" mode="aspectFill" class="avatar" />
          <view class="user-info">
            <view class="name">{{it.groupNickname}}</view>
            <!-- <view class="txt">粉丝数11  最近活跃12天内</view> -->
          </view>
        </view>
        <view class="button-content items-center" v-if="it.isOpenRecommendBonus==1">
          <view class="scale_box">奖金 {{it.recommendBonusRatio}}%</view>
          <button hover-class='hover' class="btn" @click.stop="operationFn(it)">推荐帮卖</button>
        </view>
        <view class="button-content items-center" v-else>
          <view class="tips_box">未开启推荐佣金</view>
          <button open-type="share" hover-class='hover' class="btn btn_open" id='inviteyj' @click.stop="operationFn(it)">邀请开启</button>
        </view>
      </view>
      <view class="data-wrap">
        <view class="data-item">
          <view class="num">{{it.helpSellCommission || 0}}元</view>
          <view class="txt">帮卖赚了</view>
        </view>
        <view class="data-item">
          <view class="num">{{it.helpSellOrderAmount || 0}}元</view>
          <view class="txt">我帮卖了</view>
        </view>
        <view class="data-item">
          <view class="num">{{it.recommendCommission || 0}}元</view>
          <view class="txt">推荐赚了</view>
        </view>
        <view class="data-item">
          <view class="num">{{it.recommendCount || 0}}人</view>
          <view class="txt">我推荐了</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: 'supplyGroupList',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
    }
  },
  methods: {
    operationFn(item) {
      this.$emit('customRecommend',item)
    },
    _handleClick(item) {
      this.navigateTo({ url: `/pagesA/supplyGroups/supplyDetails?groupAccountId=${item.groupAccountId}`})
    },
  }
}
</script>

<style lang="scss" scoped>
.supply-group-list {
  width: 100%;
  background-color: #FFFFFF;
  .item {
    padding: 32rpx;
    border-bottom: 2rpx solid #EBEDF0;
  }
  .user-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 72rpx;
    .user-content {
      display: flex;
      align-items: center;
      flex: 1;
    }
    .avatar {
      width: 64rpx;
      height: 64rpx;
      margin-right: 16rpx;
      border-radius: 50%;
      flex: 0 0 auto;
    }
    .name {
      font-size: 28rpx;
      line-height: 40rpx;
      font-weight: 500;
      color: $n8Color;
      @include bov(1)
    }
    .btn {
      box-sizing: border-box;
      padding: 8rpx 16rpx;
      border-radius: 32rpx;
      border: 2rpx solid $themeColor;
      font-size: 24rpx;
      line-height: 32rpx;
      color: $themeColor;
      &.btn_open {
        color: #FB9551;
        border: 2rpx solid #FB9551;
      }
    }
    .button-content {
      padding-left: 10rpx;
      .scale_box {
        margin-right: 20rpx;
        font-size: 20rpx;
        color: #B57A43;
        padding: 0 8rpx;
        line-height: 32rpx;
        background: linear-gradient(90deg, #FDEDC7 0.12%, #FEDFA6 100%);
        border-radius: 4rpx;
      }
      .tips_box {
        font-size: 28rpx;
        color: #C8C9CC;
        margin-right: 20rpx;
      }
    }
  }
  .data-wrap {
    display: flex;
    height: 106rpx;
    margin: 14rpx 0 0 80rpx;
    padding: 16rpx 0;
    .data-item {
      height: 100%;
      min-width: 140rpx;
      margin-right: 16rpx;
    }
    .num {
      font-weight: 500;
      font-size: 28rpx;
      line-height: 40rpx;
      color: $n8Color;
    }
  }
  .txt {
    font-size: 24rpx;
    line-height: 32rpx;
    color: $n6Color;
  }
}
</style>